<template>
	<view class="sub-navigationbar">
		<view class="back-btn" @click="navigationBack"></view>
		<text class="titletext">{{text}}</text>
		<view class="get-btn" :class="{'none':!btnText}" @click="navigationTo">{{btnText}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			text: {
				type: String,
				default: '我的优惠券'
			},
			btnText: {
				type: String,
				default: '获取'
			},
			url:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			navigationBack() {
				window.history.back()
			},
			navigationTo() {
				uni.navigateTo({
					url:this.url
				})
			}
		}
	}
</script>

<style lang="scss">
/* 次级导航栏 */
	$navbg:#EDEDED;
	.sub-navigationbar {
		height: 88rpx;
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #222222;
		font-size: 32rpx;
		background-color: $navbg;
		.back-btn {
			width: 100rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			&::before {
				width: 20rpx;
				height: 20rpx;
				content: '';
				border-top: 2px solid #222;
				border-left: 2px solid #222;
				transform: rotate(-45deg);
			}
		}
		.titletext{
			font-weight: bold;
		}
		.get-btn {
			padding: 0 15rpx;
			height: 48rpx;
			font-size: 20rpx;
			color: #fff;
			background-color: $xy-color-default;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			transform: translateX(-60rpx);
			&::before {
				content: '';
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				position: absolute;
				left: -6rpx;
				top: 20rpx;
				background-color:$navbg;
			}
			&::after {
				content: '';
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				position: absolute;
				right: -6rpx;
				top: 20rpx;
				background-color:$navbg;
			}
			&.none {
				width: 70rpx;
				background-color: transparent;
				&::before,
				&::after {
					display: none;
				}
			}
		}
	}	
</style>
